<template>
  <common-card class="student-summary">
    <template #title>学情总结</template>
    <p class="tip">
      <span class="bold">{{ props.studentName }}同学： </span><br />
      所选时间内，共学习
      <span class="bold">{{ summary.knowledge_count }}</span>
      个知识点，优势知识点
      <span class="bold">{{ summary.good_knowledge_count }}</span
      >个，薄弱知识点
      <span class="bold">{{ summary.weak_knowledge_count }}</span>
      个。整体情况为 <span class="bold">{{ getLevel(summary.right_rate) }}</span
      >，班次第
      <span class="bold">{{
        summary.student_index === -1 ? '-' : summary.student_index
      }}</span
      >。作业提交率
      <span class="bold">{{ getPercent(summary.commit_rate) }}</span
      >% (应交 <span class="bold">{{ summary.homework_count }}</span
      >次，实交 <span class="bold">{{ summary.commit_count }}</span
      >次)。作业正确率
      <span class="bold">{{ getPercent(summary.right_rate) }}</span
      >%，作答题数 <span class="bold">{{ summary.question_count }}</span
      >题，错误题数 <span class="bold">{{ summary.question_wrong_count }}</span
      >题。
    </p>
    <p class="more">
      <span class="student">等级：{{ getLevel(summary.right_rate) }}</span>
      <span class="student"
        >班次：{{
          summary.student_index === -1 ? '-' : summary.student_index
        }}</span
      >
      <span class="student"
        >提交率：{{ getPercent(summary.commit_rate) }}%<span class="comparison"
          >（班级：{{ getPercent(summary.class_commit_rate) }}%）</span
        ></span
      >
      <span class="student"
        >正确率：{{ getPercent(summary.right_rate) }}%<span class="comparison"
          >（班级：{{ getPercent(summary.class_right_rate) }}%）</span
        ></span
      >
      <span class="student"
        >作答题数：{{ summary.question_count }}题<span class="comparison"
          >（班级：{{
            parseFloat((summary.class_question_count || 0).toFixed(1))
          }}题）</span
        ></span
      >
    </p>
  </common-card>
</template>
<script setup>
import CommonCard from '../components/CommonCard.vue'
import { getStudentSummary } from '@/apis/situation-report/index'
import { useSituationReport } from '@/stores/situation-report'
import { getLevel, getPercent } from '../utils'
import { watchEffect, ref } from 'vue'
const situationReport = useSituationReport()
const props = defineProps({
  studentId: {
    default: '',
    type: String
  },
  studentName: {
    default: '',
    type: String
  }
})

const summary = ref({
  homework_count: 0,
  commit_rate: 0,
  commit_count: 0,
  class_commit_rate: 0,
  right_rate: 0,
  class_right_rate: 0,
  question_count: 0,
  class_question_count: 0,
  question_wrong_count: 0,
  knowledge_count: 0,
  weak_knowledge_count: 0,
  good_knowledge_count: 0,
  student_index: 0
})

const getSummary = async () => {
  const params = {
    student_id: props.studentId,
    ...situationReport.search
  }
  const { data } = await getStudentSummary(params)
  summary.value = { ...data }
}

watchEffect(async () => {
  if (situationReport.search && props.studentId) {
    getSummary()
  }
})
</script>
<style lang="less" scoped>
.student-summary {
  .tip {
    padding: 8px 12px;
    background: #f6f8fe;
    border-radius: 16px;

    .bold {
      font-weight: 700;
    }
  }

  .more {
    margin-top: @gap;
    display: flex;
    justify-content: space-between;

    .student {
      .comparison {
        color: @not-important-font-color;
      }
    }
  }
}
</style>
